<template>
  <div name="vegetable">
    <p>
      <button
        class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#vegetable"
        aria-expanded="false"
        aria-controls="collapseExample"
      >
        蔬菜
      </button>
    </p>
    <div class="collapse" id="vegetable">
      <div class="card card-body">
        <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><h4>蔬菜</h4></li>
            <li
              v-for="i in vegetable"
              class="breadcrumb-item active"
              aria-current="page"
              :key="i"
            >
              <router-link
                :to="{ path: '/producerProductsInfo', query: { cate: i } }"
                >{{ i }}</router-link
              >
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</template>
      
<script>
export default {
  name:'vegetable',
    data() {
    return {
      vegetable: [],
    };
  },
  methods: {
    getData(species) {
      this.axios
        .get(
          "http://122.51.157.58:8081/api-service/getBySpecies?key=123456&species=" + species
        )
        .then((body) => {
          var result = body.data;
          for (var i = 0; i < result.data.result.length; i++) {
            this.vegetable.push(result.data.result[i].cateName);
          }
        });
    },
  },
  created(){
      this.getData("蔬菜");
  }
};
</script>
      
<style>
</style>